export default {
  data () {
    return {
      // 步骤提交表单
      edits: false, // disabled编辑或禁用状态
      stepform: {
        stitle: [''], // 步骤标题
        sdesc: [''], // 步骤单位
        simg: [''], // 步骤图片
        allstep: [] // 收集所有步骤
      },
      // 上传图片部分
      src: '', // 展示图片的地址
      indexs: 0 // 图片数组的下标
    }
  },
  methods: {
    getIndex (i) { // 获取点击图片的下标
      this.indexs = i
      // console.log(i);
    },
    // 上传图片的选择和删除及存储file
    // 阻止upload的自己上传，进行再操作
    onchange (file, filesList) {
      // 试一下$event
      var windowURL = window.URL || window.webkitURL
      this.src = windowURL.createObjectURL(file.raw)
      this.stepform.simg[this.indexs] = file.raw
    }, // 删除图片
    handleRemove (file, filesList) {
      // 根据值或者key找索引
      // let index=this.stepform.simg.findIndex(item=>item==file.raw);
      // console.log(index);
      this.stepform.simg.splice(this.indexs, 1)
    },
    // 添加一组步骤
    addstep (index, type) {
      // 为空判断
      const lastitem = this.stepform.stitle[this.stepform.stitle.length - 1]
      const lastitem2 = this.stepform.sdesc[this.stepform.sdesc.length - 1]
      const lastitem3 = this.stepform.simg[this.stepform.simg.length - 1]
      // console.log(lastitem3);
      if (lastitem.trim() === '' || lastitem2.trim() === '' || lastitem3 === '') {
        this.$message.error('请您填写完一项后继续追加')
      } else {
        this.stepform.stitle.push('')
      }
    },
    // 删除一组步骤
    removems (index, type) {
      this.stepform.stitle.splice(index, 1)
      this.stepform.sdesc.splice(index, 1)
      this.stepform.simg.splice(index, 1)
      this.$message.success('移除成功')
    },
    // 收集全部步骤，文本框禁用并把数据传给父组件
    subStep () {
      // 信息是否为空判断
      for (var i = 0; i < this.stepform.stitle.length; i++) {
        // 每循环一次，得到一个步骤对象，然后加入到数组里
        var m = {
          stitle: this.stepform.stitle[i],
          sdesc: this.stepform.sdesc[i],
          sfile: this.stepform.simg[i]
        }
        this.stepform.allstep[i] = m // 存入数组
      }
      // console.log(this.stepform.allstep);
      this.edits = !this.edits// 禁用文本框
      this.$emit('stepEvent', this.stepform.allstep, this.stepform.simg) // 把数据传给父组件
    },
    // 编辑按钮 启用文本框和上传图片
    editStep () {
      this.edits = !this.edits
    }
  }
}
